import { genChartByAiAsyncMqUsingPOST } from '@/services/ant-design-pro/chartController';
// @ts-ignore
import { UploadOutlined } from '@ant-design/icons';
import {
  Button,
  Card,
  Form,
  Input,
  message,
  Select,
  Space,
  Upload,
} from 'antd';
import TextArea from 'antd/lib/input/TextArea';
import React, { useState } from 'react';
import { useForm } from 'antd/lib/form/Form';

/**
 * 
 * @returns 图表异步页面
 */
const AddChartAsync: React.FC = () => {
  const [form] = useForm();
  const [submitting, setSubmitting] = useState<boolean>(false);
  

  const onFinish = async (values: any) => {
    // 避免重复提交
    if(submitting){
      return;
    }
    setSubmitting(true)
    console.log('用户表单内容: ', values);
    const params = {
      ...values,
      file: undefined
    }
    try {
      const res = await genChartByAiAsyncMqUsingPOST(params, {}, values.file.file.originFileObj)
      if(!res?.data ){
        message.error('分析失败')
      }else{
        message.success('分析任务提交成功，稍后请在我的图表页面查看')
        form.resetFields();
      }
    } catch (e: any) {
      message.error("失败", e.message)
    }
    setSubmitting(false)
  };
  
  
  return (
    <div className="add-chart-async">
      
      <Card title="智能分析">
        <Form
        form={form}
        name="addChart"
        labelAlign='left'
        labelCol={{span: 3}}
        wrapperCol={{span: 16}}
        onFinish={onFinish}
        initialValues={{}}
      >

        <Form.Item name="goal" label="分析目标" rules={[{ required: true, message: '不能为空' }]}>
          <TextArea placeholder='请输入你的分析需求.如分析网站的用户增长情况'/>
        </Form.Item>

        <Form.Item name="name" label="图表名称" rules={[{ required: true, message: '不能为空' }]}>
          <Input placeholder='请输入图表名称'/>
        </Form.Item>

        <Form.Item
          name="chartType"
          label="图标类型"
          hasFeedback
        >
          <Select
            options={[
              { value: '柱状图', label: '柱状图' },
              { value: '折线图', label: '折线图' },
              { value: '饼图', label: '饼图' },
              { value: '堆叠图', label: '堆叠图' },
              { value: '雷达图', label: '雷达图' },
            ]}
          />
        </Form.Item>

        <Form.Item
          name="file"
          label="原始数据"
        >
          <Upload name="file" action="/upload.do" listType="picture" maxCount={1}>
            <Button icon={<UploadOutlined />}>上传 CSV 文件</Button>
          </Upload>
        </Form.Item>

        <Form.Item wrapperCol={{ span: 12, offset: 3 }}>
          <Space>
            <Button type="primary" htmlType="submit" loading={submitting} disabled={submitting}>
              智能分析
            </Button>
            <Button htmlType="reset">重置</Button>
          </Space>
        </Form.Item>
        </Form>
      </Card>

      
      
    </div>
  );
};
export default AddChartAsync;
